
<script setup>
	import { ref } from "vue";
	import { login, getUserSelf, getAvatarContentByID } from "/request.js";
	import global from "/global.js";
	
	global.token = "";
	global.userSelf = null;
	global.avatarContent = "";
	
	var username = ref("");
	var password = ref("");
	
	async function clickLogin()
	{
		console.log("clickLogin");
		console.log("username: " + username.value);
		console.log("password: " + password.value);
		await login(username.value, password.value)
		.then(async function(t) {
			if (t)
			{
				global.token = t;
				await getUserSelf()
				.then(function(u) {
					global.userSelf = u;
				});
				await getAvatarContentByID(global.userSelf.avatarId)
				.then(function(content) {
					Object.assign(global.userSelf, {
						avatarContent: content
					});
				});
				
			}
		});
		
		
		if (global.token)
		{
			console.log(global.userSelf);
			uni.navigateTo({
				url: "/pages/manage/manage"
			})
		}
		else
			global.token = "";
		
	}
	
	function clickBack()
	{
		uni.navigateBack();
	}
</script>



<template>
	<header>
		<nav>
			<p>登录</p>
		</nav>
	</header>
	
	<main class="container">
		<view class="field">
			<p class="label">Username</p>
			<view class="control">
				<input class="input" type="text" placeholder="请输入用户名" v-model="username"/>
			</view>
		</view>
	
	
		<view class="field">
			<p class="label">Password</p>
			<view class="control">
				<input class="input" type="text" placeholder="请输入密码" v-model="password"/>
			</view>
		</view>
	
	
		<view class="field is-grouped is-grouped-centered">
			<view class="control">
				<button class="button is-link" v-on:click="clickLogin">登录</button>
			</view>
			<view class="control">
				<button class="button is-light" v-on:click="clickBack">返回</button>
			</view>
		</view>
		
	</main>
	
</template>



<style>
	nav {
		height: 6vh;
		background-color: whitesmoke;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		justify-items: center;
		margin-top: 2vh;
	}
</style>


